<template>
    <div class="app-container">
        <a-card>
            <BasicTable ref="tableRef" :params="params" :columns="columns" :tree="true" :query="query" :selectbox="false">
                <template #form>
                    <a-form-item label="部门名称" name="name">
                        <a-input v-model:value="params.name" placeholder="请输入部门名称" />
                    </a-form-item>
                </template>
                <template #button>
                    <a-button v-permission="'system:dept:add'" type="primary" @click="open(drawerRef)">
                        <template #icon>
                            <PlusOutlined />
                        </template>
                        新增
                    </a-button>
                </template>
                <template #table="{ body }">
                    <template v-if="body.column.key === 'status'">
                        <Switch v-model:checked="body.record.status" @change="switchChange(updateStatus, body.record.id, $event)" />
                    </template>
                    <template v-if="body.column.key === 'createDate'">
                        {{ parseTime(body.record.createDate) }}
                    </template>
                    <template v-if="body.column.key === 'action'">
                        <a-button v-permission="'system:dept:child'" type="link" @click="handleAddChild(body.record)">
                            <template #icon>
                                <PlusOutlined />
                            </template>
                            添加下级
                        </a-button>
                        <a-button v-permission="'system:dept:edit'" type="link" @click="open(drawerRef, body.record)">
                            <template #icon>
                                <EditOutlined />
                            </template>
                            编辑
                        </a-button>
                        <a-button v-if="hasChildren(body.record)" v-permission="'system:dept:delete'" type="link" disabled>
                            <template #icon>
                                <DeleteOutlined />
                            </template>
                            删除
                        </a-button>
                        <a-popconfirm v-else title="确定要删除吗?" @confirm="del(deleteById, body.record.id, tableRef)">
                            <a-button v-permission="'system:dept:delete'" type="link">
                                <template #icon>
                                    <DeleteOutlined />
                                </template>
                                删除
                            </a-button>
                        </a-popconfirm>
                    </template>
                </template>
            </BasicTable>
        </a-card>
        <Drawer ref="drawerRef" @close="refresh(tableRef)" />
    </div>
</template>
<script setup name="DepartModule">
import { computed, reactive, ref, toRaw } from 'vue'
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { query, updateStatus, deleteById } from '/@/api/System/Depart'
import { useBasicTable } from '@iframe/tools/mixins/BasicTableMixins'
import { Switch, BasicTable } from '@iframe/tools/components'
import Drawer from './Drawer.vue'

const { refresh, switchChange, del, open } = useBasicTable()
const tableRef = ref()
const drawerRef = ref()
const params = reactive({
    code: null,
    name: null
})
const columns = [
    {
        title: '部门名称',
        dataIndex: 'name',
        key: 'name',
        width: 250
    },
    {
        title: '部门描述',
        dataIndex: 'des',
        key: 'des'
    },
    {
        title: '排序号',
        dataIndex: 'sort',
        key: 'sort',
        width: 150,
        align: 'center'
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 150,
        align: 'center'
    },
    {
        title: '创建时间',
        dataIndex: 'createDate',
        key: 'createDate',
        align: 'center',
        width: 180
    },
    {
        title: '操作',
        key: 'action',
        align: 'center',
        width: 300
    }
]

const hasChildren = computed(() => {
    return item => item.children && item.children.length > 0
})

const handleAddChild = row => {
    const record = toRaw(row)
    drawerRef.value.open({ parentId: record.id })
}
</script>
